<template>
  <div class="step-box">
    <el-form ref="form" :model="form" :rules="rules" label-width="150px">
      <div class="form-box">
        <p class="sub-title">营业执照信息</p>
        <div class="form-item">
          <div class="form-flex-item">
            <el-form-item label="主体类型：" prop="mainBodyType">
              <el-select v-model="form.mainBodyType" clearable>
                <el-option
                  v-for="item in principalType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </div>
          <div class="form-flex-item">
            <el-form-item label="资质图片：" prop="aptitudeImage">
              <UploadFile :file-list="form.aptitudeImage" @change="uploadHandle($event, 'aptitudeImage')">
                <div slot="tip">格式要求：JPG、JPEG、PNG，单张图片大小不超过10M
                  <el-button class="upload-demo" type="text" @click="showDemoHandle('https://cy-smartcity.com:8100/assets/img1.e8ba8812.png')">查看示例</el-button>
                </div>
              </UploadFile>
            </el-form-item>
          </div>
          <div class="form-flex-item">
            <el-form-item label="社会统一信用代码：" prop="socialCreditCode">
              <el-input v-model="form.socialCreditCode" maxlength="18" placeholder="请输入" clearable />
            </el-form-item>
          </div>
          <div class="form-flex-item">
            <el-form-item label="名称：" prop="infoName">
              <el-input v-model="form.infoName" placeholder="请输入" clearable />
            </el-form-item>
          </div>
        </div>
      </div>
      <div class="form-box">
        <p class="sub-title">法人身份信息信息</p>
        <div class="form-item">
          <div class="form-flex-item">
            <el-form-item label="法人身份信息：" prop="belongingPlace">
              <el-radio-group v-model="form.belongingPlace" clearable>
                <el-radio v-for="item in identityType" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div class="form-flex-item">
            <el-form-item prop="idPhoto">
              <UploadFile :file-list="form.idPhoto" @change="uploadHandle($event, 'idPhoto')">
                <div slot="tip">
                  <p>请上传身份证正反面
                    <el-button class="upload-demo" type="text" @click="showDemoHandle('https://cy-smartcity.com:8100/assets/image6.01598bbc.png')">查看示例</el-button></p>
                  <p>格式要求：JPG、JPEG、PNG，单张图片大小不超过10M</p>
                </div>
              </UploadFile>
            </el-form-item>
          </div>
          <div class="form-flex-item">
            <el-form-item label="身份证号：" prop="idCardNumber">
              <el-input v-model="form.idCardNumber" placeholder="请输入" clearable />
            </el-form-item>
          </div>
          <div class="form-flex-item">
            <el-form-item label="姓名：" prop="aptitudeName">
              <el-input v-model="form.aptitudeName" placeholder="请输入" clearable />
            </el-form-item>
          </div>
          <div class="form-flex-item">
            <el-form-item label="联系方式：" prop="phone">
              <el-input v-model.trim="form.phone" placeholder="请输入" maxlength="11" clearable />
            </el-form-item>
          </div>
        </div>
      </div>
    </el-form>
    <PreviewImg :img-url="demoImg" :show-image.sync="showDemo" />
  </div>
</template>

<script>

import { PRINCIPAL_TYPE, IDENTITY_TYPE } from '@/utils/enum'
import UploadFile from '@/components/UploadFile/index.vue'
import PreviewImg from '@/components/PreviewImg/index.vue'

export default {
  name: 'Step2',
  components: {
    UploadFile,
    PreviewImg
  },
  props: {
    id: {
      type: [String, Number],
      default: ''
    },
    formDetail: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      demoImg: '',
      showDemo: false,
      principalType: PRINCIPAL_TYPE,
      identityType: IDENTITY_TYPE,
      form: {
        mainBodyType: 0,
        aptitudeImage: '',
        socialCreditCode: '',
        infoName: '',
        belongingPlace: 0,
        idPhoto: '',
        idCardNumber: '',
        aptitudeName: '',
        phone: ''
      },
      rules: {
        mainBodyType: [
          { required: true, message: '请选择企业主体', trigger: ['change'] }
        ],
        aptitudeImage: [
          { required: true, message: '请上传资质图片', trigger: ['blur', 'change'] }
        ],
        socialCreditCode: [
          { required: true, message: '请输入社会统一信用代码', trigger: ['blur'] },
          { pattern: /^([A-Z0-9]{15}|[A-Z0-9]{18})$/, message: '统一社会信用代码格式不正确', trigger: ['blur'] }
        ],
        infoName: [
          { required: true, message: '请输入名称', trigger: ['blur'] }
        ],
        belongingPlace: [
          { required: true, message: '请选择法人身份信息', trigger: ['change'] }
        ],
        idPhoto: [
          { required: true, message: '请上传身份信息图片', trigger: ['blur'] }
        ],
        idCardNumber: [
          { required: true, message: '请输入身份证号', trigger: ['blur'] }
        ],
        aptitudeName: [
          { required: true, message: '请输入姓名', trigger: ['blur'] }
        ],
        phone: [
          { required: true, message: '请输入联系方式', trigger: ['blur'] }
        ]
      }
    }
  },

  created() {
    if (this.id) {
      this.form = this.formDetail
    }
  },

  methods: {

    // 展示示例
    showDemoHandle(imgUrl) {
      this.demoImg = imgUrl
      this.showDemo = true
    },

    // 上传图片处理
    uploadHandle(payload, name) {
      this.form[name] = payload.fileList[0]?.url
      this.$refs.form.validateField(name)
    }

  }
}
</script>
<style lang="scss" scoped>
@import '@/components/Approve/step.scss';
</style>
